<template>
  <div>
    <div @keydown.enter="getList" class="search" @submit.native.prevent>
      <el-form :inline="true" :model="searchData">
        <el-form-item label="关键词">
          <el-input v-model="searchData.keyword" placeholder="关键词" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">查询</el-button>
        </el-form-item>
        <el-form-item label="" v-if="$global.hasPermission('passive/add')">
          <el-button type="primary" icon="el-icon-plus" @click="btnShowForm('add')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" fit highlight-current-row>
      <el-table-column label="标题" prop="name" align="center" />
      <el-table-column label="key" prop="key" align="center" />
      <el-table-column label="token" prop="tokenPart" align="center" />
      <el-table-column label="当前值" prop="callbackValue" align="center" />
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button v-if="$global.hasPermission('passive/update')" size="small" class="blackStyle" type="text"
            @click="btnShowForm('edit', scope.row)">修改</el-button>

          <el-button v-if="$global.hasPermission('passive/delete')" size="small" class="blackStyle" type="text"
            @click="deleteItem(scope.row.id)">删除</el-button>

          <el-button v-if="$global.hasPermission('passive/update')" size="small" class="blackStyle" type="text"
            @click="log(scope.row.id)">日志</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination @current-change="currentChange" :page-size="searchData.pageSize" :total="totalCount"
      style="float: right; margin-top: 10px;" background layout="prev, pager, next">
    </el-pagination>


    <!-- form -->
    <el-dialog :title="(formDialog.type == 'add' ? '新增' : '修改')" :visible.sync="formDialog.show" width="55%"
      class="dialogClass" :close-on-click-modal="false">
      <el-form :model="form" class="form">
        <div style="display: flex;">
          <el-form-item label="标题" label-width="80px" style="flex:6">
            <el-input v-model="form.name" placeholder="标题" clearable />
          </el-form-item>
        </div>

        <div style="display: flex;">
          <el-form-item label="Key" required label-width="80px" style="flex:6">
            <el-input v-model="form.key" placeholder="Key" clearable />
          </el-form-item>
        </div>

        <div style="display: flex;">
          <el-form-item label="当前值" label-width="80px" style="flex:6">
            <el-input v-model="form.callbackValue" placeholder="当前值" clearable />
          </el-form-item>
        </div>
        <el-collapse>
          <el-collapse-item name="2">
            <template slot="title">
              <span style="color: #409eff;margin-left: 20px;">回调通知设置..</span>
            </template>

            <div style="display: flex;" v-for="item in form.noticeList">
              <el-form-item label="通知开关" label-width="100px" style="flex:0.5">
                <el-switch v-model="item.isEnble" size="small" />
              </el-form-item>
              <el-form-item label="当值变为" label-width="80px" style="flex:2.5">
                <el-input v-model="item.triggerValue" placeholder="值" clearable />
              </el-form-item>
              <el-form-item label="发送邮件" label-width="80px" style="flex:6">
                <el-input v-model="item.content" placeholder="邮件内容" clearable />
              </el-form-item>
            </div>
            <el-form-item label="通知对象" label-width="100px">
              <el-input v-model="form.noticeObjects" placeholder="邮件：多个用逗号或分号隔开" clearable />
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
        <div v-if="formDialog.type == 'edit'" style="margin-top: 20px;">
          <el-form-item label="当前值(Get)" label-width="110px" style="flex:6">
            <el-alert type="success" :closable="false">{{ origin }}/api/passive/value?token={{ form.token }}&key={{
              form.key
            }}</el-alert>
          </el-form-item>
          <el-form-item label="回调地址(Get)" label-width="110px" style="flex:6">
            <el-alert type="success" :closable="false">{{ origin }}/api/passive/callback?token={{ form.token }}&key={{
              form.key }}&value={value}</el-alert>
          </el-form-item>
        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" v-loading="formDialog.loading">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 日志 -->
    <el-drawer title="" :visible.sync="showLog" direction="rtl" size="50%">
      <div style="height: 86vh;overflow: visible;margin:0 20px">
        <el-table :data="logs" v-loading="loadingLogs">
          <el-table-column property="createTime" label="日期" width="140"></el-table-column>
          <el-table-column property="content" label="内容"></el-table-column>
          <el-table-column label="备注" prop="content" align="center">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.note" placement="top-start">
                <pre style="text-align: left;">{{ scope.row.note }}</pre>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- <el-table-column property="note" label="备注"></el-table-column> -->
          <!-- <el-table-column label="通知" align="center" width="60">
            <template slot-scope="scope">
              <el-button v-if="scope.row.hasNotice && $global.hasPermission('job/noticeDetails')" size="small"
                class="blackStyle" type="text" @click="getNotices(scope.row.id)">通知日志</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination @current-change="currentChangeLog" :page-size="searchDataLog.pageSize" :total="TotalCountLog"
          style="float: right; margin-top: 10px;" background layout="prev, pager, next">
        </el-pagination>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list: null,
      listLoading: false,
      searchData: {
        pageIndex: 1,
        pageSize: 10,
      },
      searchDataLog: {
        pageIndex: 1,
        pageSize: 10,
      },
      totalCount: 0,
      form: {},
      formInit: { noticeList: [{ isEnble: false, triggerValue: '', content: '' }, { isEnble: false, triggerValue: '', content: '' }] },
      formDialog: {
        title: '新增',
        show: false,
        type: 'add',
        loading: false,
        cronDes: '请先输入cron表达式',
      },
      notices: [],
      origin: location.origin,
      showLog: false,
      logs: [],
      TotalCountLog: 0,
      loadingNotice: false,
      loadingLogs: false,
    }
  },
  created() {
    console.log(12, location.origin)
    this.getList()
  },
  methods: {
    getList() {
      let that = this
      that.listLoading = true
      that.$system
        .get('passive/get', this.searchData)
        .then((res) => {
          this.list = res.list
          this.list.forEach((s) => {
            s.tokenPart = this.$format.formatHidePart(s.token)
          })
          this.totalCount = res.totalCount
        })
        .catch((res) => { })
        .finally(() => {
          that.listLoading = false
        })
    },
    log(rowId) {
      let that = this
      this.searchDataLog.jobId = rowId
      that.getLogs()
      that.showLog = true
    },
    getLogs() {
      let that = this
      that.loadingLogs = true
      that.$system
        .get('job/GetRecords', that.searchDataLog)
        .then((res) => {
          this.logs = res.list
          this.logs.forEach(s => {
            s.resultOmit = this.$format.omit(s.result, 20)
            s.contentOmit = this.$format.omit(s.content, 20)
          });
          this.TotalCountLog = res.totalCount
        })
        .catch((res) => { })
        .finally(() => {
          that.loadingLogs = false
        })
    },

    changeOnlyFailed() {
      this.getRecords()
    },
    deleteItem(_id) {
      this.$confirm('确定删除该数据?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          this.$system
            .delete('passive/delete', { id: _id })
            .then((res) => {
              this.$tip.success()
              this.getList()
            })
            .catch(() => { })
            .finally(() => {
              this.listLoading = false
            })
        })
        .catch(() => { })
    },
    btnShowForm(type, item) {
      console.log(item)
      this.formDialog.type = type
      this.form = {}
      this.formDialog.show = true
      if (this.formDialog.type === 'edit') {
        this.form = this.$format.deepCopy(item)
        this.form = Object.assign({}, this.form, { noticeList: JSON.parse(this.form.notices) })
      } else {
        this.form = this.formInit
      }
    },
    currentChange(val) {
      this.searchData.pageIndex = val
      this.getList()
    },
    currentChangeLog(val) {
      this.searchDataLog.pageIndex = val
      this.getLogs()
    },
    submit() {
      // debugger
      let that = this
      this.formDialog.loading = true
      that.form.notices = JSON.stringify(that.form.noticeList)
      if (that.formDialog.type == 'edit') {
        this.$system
          .put('passive/update', that.form)
          .then((res) => {
            this.$tip.success()
            that.formDialog.show = false
            that.getList()
          })
          .catch()
          .finally(() => {
            this.formDialog.loading = false
          })
      } else {
        this.$system
          .post('passive/add', that.form)
          .then((res) => {
            this.$tip.success()
            that.formDialog.show = false
            that.getList()
          })
          .catch()
          .finally(() => {
            this.formDialog.loading = false
          })
      }
    },

  },

}
</script>

<style scoped>
.el-drawer__header {
  height: 36px;
  margin-bottom: 0px;
}
</style>

<style>
.dialogClass .el-dialog__body {
  padding: 12px 30px 0px 30px;
}

.dialogClass .el-collapse-item__content {
  padding-bottom: 0px;
}

.recentStatus {
  width: 10%;
  height: 12px;
  margin-right: 2px;
}

.recentStatus1 {
  background-color: #83ce42;
}

.recentStatus0 {
  background-color: #f15b5b;
}

.cronDes {
  font-size: 0.8em;
  color: #5e6d82;
  background-color: #f5f5f5;
  padding: 0 5px;
  border-radius: 5px;
}
</style>